<template>
    <!-- width="1920" height="1080" 可写可不写额 -->
    <v-scale-screen :boxStyle="{ background: '#0f1f23' }" width="8640" height="2460">
        <div class="led-box">
            <div class="led-left">
                <div class="led-left-top">
                    <div class="icon1 icon">2175709人</div>
                    <div class="icon2 icon">5天</div>
                    <dv-border-box-10 :color="['#f200d6']" style="width: 600px;height: 500px; margin-right: 30px;">
                        <div class="title">过夜人数占比</div>
                        <div id="pie" style="width:540px;height:400px;"></div>
                    </dv-border-box-10>
                    <dv-border-box-10 :color="['#f200d6']" style="width: 1240px;height: 500px;">
                        <div class="title">区县区域分别接待人次</div>
                        <div id="column" style="width:1240px;height:400px;margin-left: 20px;"></div>
                    </dv-border-box-10>
                </div>

                <div class="led-left-center">
                    <table>
                        <thead>
                            <tr>
                                <td>区域风险级别</td>
                                <td>发型类型</td>
                                <td>人员目标</td>
                                <td>编辑</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>风险区二级预警</td>
                                <td>手动</td>
                                <td>风险区域人员</td>
                                <td>修改 删除</td>
                                <td>开始发送</td>
                            </tr>
                            <tr>
                                <td>风险区二级预警</td>
                                <td>手动</td>
                                <td>风险区域人员</td>
                                <td>修改 删除</td>
                                <td>开始发送</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>

                    <table class="mat-50">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>发送时间</td>
                                <td>内容文案</td>
                                <td style="width: 200px;">积累发送数量</td>
                                <td style="width: 200px;">第一次出发通知时人员总量</td>
                                <td style="width: 200px;">当前滞留人员总量</td>
                                <td>状态</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>2023-03-10 16:35</td>
                                <td>风险区域人员</td>
                                <td>9999</td>
                                <td>8888</td>
                                <td>666</td>
                                <td>已结束</td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>2023-03-10 16:35</td>
                                <td>风险区域人员</td>
                                <td>9999</td>
                                <td>8888</td>
                                <td>666</td>
                                <td>已结束</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>

                        </tbody>
                    </table>
                </div>
                <div class="led-left-bottom">
                    <div class="led-left-right-left">
                        <div class="left-bottom-left-tow">
                            <div class="led-left-right-left-row1 icon-bg">
                                156060万
                            </div>
                            <div class="led-left-right-left-row1">
                                <dv-border-box-10 :color="['#f200d6']">
                                    <div class="title">游客出行方式偏好</div>
                                    <div id="container1" style="width:100%;height:240px;"></div>
                                </dv-border-box-10>
                            </div>
                            <div class="led-left-right-left-row1">
                                <dv-border-box-10 :color="['#f200d6']">
                                    <div class="title">游客性别分布</div>
                                    <div id="container2" style="width:100%;height:240px;"></div>
                                </dv-border-box-10>
                            </div>

                        </div>
                        <div class="left-bottom-left-tow mat-top">
                            <div class="led-left-right-left-row1">
                                <dv-border-box-10 :color="['#f200d6']">
                                    <div class="title">游客年龄分布</div>
                                    <div id="container3" style="width:100%;height:240px;"></div>
                                </dv-border-box-10>
                            </div>
                            <div class="led-left-right-left-row1">
                                <dv-border-box-10 :color="['#f200d6']">
                                    <div class="title">游客资产等级分布</div>
                                    <div id="container4" style="width:100%;height:240px;"></div>
                                </dv-border-box-10>
                            </div>
                            <div class="led-left-right-left-row1">
                                <dv-border-box-10 :color="['#f200d6']">
                                    <div class="title">游客行业贡献度</div>
                                    <div id="container5" style="width:100%;height:240px;"></div>
                                </dv-border-box-10>
                            </div>

                        </div>
                    </div>
                    <div class="rollTable">
                        <dv-border-box-10 :color="['#f200d6']">
                            <div class="title">行政区域内游客消费排名</div>
                            <div id="column2" style="width:1300px;height:600px;margin-left: 20px;"></div>
                        </dv-border-box-10>
                    </div>
                </div>
            </div>
            <div class="led-center">
                <div class="led-center-top">
                    <img class="hot-title" src="../assets/zhImage/hot-title.png" alt="">
                </div>
                <div class="hot-center">
                    <div class="icon-bg">
                        <div>5378321人</div>
                        <div>4563321人</div>
                        <div>4890212人</div>
                    </div>
                    <div>
                        <img class="hot" src="../assets/zhImage/hot.png" alt="">
                    </div>
                    <dv-border-box-10 class="bg" :color="['#f200d6']">
                        <div class="title">外来人口来源地（top10）</div>
                        <div id="horColumn" style="width:698px;height:1227px"></div>
                    </dv-border-box-10>
                </div>

            </div>
            <div class="right">
                <div class="right-top">
                    <div class="right-bottom-left">
                        <div class="top-row">
                            <div class="icon-list">
                                <div>5378321人</div>
                                <div>4563321人</div>
                                <div>4890212人</div>
                            </div>
                            <dv-border-box-10 class="bg" :color="['#f200d6']"
                                style="width:100%;height:500px;margin-top: 30px;">
                                <div class="title">人口漫出分布</div>
                                <div id="pie2" style="width:100%;height:400px;"></div>
                            </dv-border-box-10>
                        </div>
                        <div class="top-row right">
                            <dv-border-box-10 :color="['#f200d6']" class="bg">
                                <div class="title">外来人口来源地(top10)</div>
                                <div id="column5" style="width:100%;height:800px;"></div>
                            </dv-border-box-10>
                        </div>
                    </div>
                </div>
                <div class="right-bottom">

                    <div class="right-bottom-right">
                        <div class="row">
                            <dv-border-box-10 :color="['#f200d6']" class="bg">
                                <div class="title">景区实时游客趋势</div>
                                <div id="foldLine" style="width:100%;height:350px;"></div>
                            </dv-border-box-10>
                        </div>
                        <div class="row">
                            <dv-border-box-10 :color="['#f200d6']">
                                <div class="title">各区县内接待游客</div>
                                <div id="column3" style="width:100%;height:350px;"></div>
                            </dv-border-box-10>
                        </div>
                        <div class="row flex">
                            <div class="image icon3-bg">
                                1370696人
                            </div>
                            <dv-border-box-10 :color="['#f200d6']">
                                <div class="title">景区游客停留时长</div>
                                <div id="column6" style="width:100%;height:350px;margin-left: 20px;"></div>
                            </dv-border-box-10>
                        </div>
                        <div class="row">
                            <dv-border-box-10 :color="['#f200d6']">
                                <div class="title">各区县外接待游客</div>
                                <div id="column4" style="width:100%;height:350px;"></div>
                            </dv-border-box-10>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </v-scale-screen>
</template>
 
<script>
import Charts from '@jiaminghi/charts'
import json from '@/utils/zhOption.js'
import * as echarts from "echarts";

export default {
    data() {
        return {
            config: json.config,
            config2: json.config2
        };
    },
    mounted() {
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.$nextTick(() => {

                const pie = echarts.init(document.getElementById("pie"));
                pie.setOption(json.pie);

                const pie2 = echarts.init(document.getElementById("pie2"));
                pie2.setOption(json.pie2);

                const column = echarts.init(document.getElementById("column"));
                column.setOption(json.column);

                const column2 = echarts.init(document.getElementById("column2"));
                column2.setOption(json.column2);

                const container1 = echarts.init(document.getElementById("container1"));
                container1.setOption(json.pieOption2);

                const container2 = echarts.init(document.getElementById("container2"));
                container2.setOption(json.pieOption);

                const container3 = echarts.init(document.getElementById("container3"));
                container3.setOption(json.pieOption3);

                const container4 = echarts.init(document.getElementById("container4"));
                container4.setOption(json.pieOption4);

                const container5 = echarts.init(document.getElementById("container5"));
                container5.setOption(json.pieOption5);

                const horColumn = echarts.init(document.getElementById("horColumn"));
                horColumn.setOption(json.horColumn);

                const column3 = echarts.init(document.getElementById("column3"));
                column3.setOption(json.column3);

                const column4 = echarts.init(document.getElementById("column4"));
                column4.setOption(json.column4);

                const column5 = echarts.init(document.getElementById("column5"));
                column5.setOption(json.column5);

                let foldLine = echarts.init(document.getElementById("foldLine"));
                foldLine.setOption(json.foldLine);

                const column6 = echarts.init(document.getElementById("column6"));
                column6.setOption(json.option);

            })
        }
    },
};
</script>
<style></style>

<style lang="less" scoped>
/deep/ .row-item {
    color: #7abd9a;
    font-size: 38px !important;
}

.bg {
    background: #110237;
}

.title {
    font-size: 40px;
    color: #ffffff;
    font-weight: bold;
}

.row-item .index {
    background: transparent !important;
}

/deep/.border-box-content {
    padding: 10px 30px;
    box-sizing: border-box;
}

table {
    width: 100%;
    font-size: 32px;

    thead {
        width: 100%;

        text-align: center;
        color: #fff;

        tr,
        td {
            height: 70px;
            line-height: 70px;
            box-sizing: border-box;
            text-align: center;
            color: #fff;
            background: #372d44 !important;
            border-left: 1px solid #4f99ba;
            border-bottom: 1px solid #4f99ba;
        }
    }

    tbody {

        tr,
        td {
            height: 70px;
            line-height: 70px;
            box-sizing: border-box;
            text-align: center;
            color: #fff;
            background: #170023;
            border-left: 1px solid #4f99ba;
            border-bottom: 1px solid #4f99ba;
        }
    }

}

.led-box::before {
    content: '';
    position: absolute;
    font-family: 'FZCYJ';
    top: 0;
    left: 0;
    background: url('../assets/zhImage/bg.jpg') no-repeat;
    background-size: 8640px 2460px;
    height: 2460px;
    width: 100%;
    text-align: center;
    z-index: -1;
}

.led-box {
    width: 8640px;
    display: flex;
    padding-top: 240px;
    height: 2460px;

    .led-left {
        width: 3200px;
        padding: 0 50px;
        box-sizing: border-box;

        .led-left-top {
            background: url('../assets/zhImage/left-top.png') no-repeat;
            background-size: 100% 100%;
            width: 3200px;
            height: 660px;
            padding: 140px 40px 40px 40px;
            box-sizing: border-box;
            display: flex;

            .icon {
                display: block;
                width: 600px;
                margin-right: 30px;
                height: 500px;
                line-height: 350px;
                font-size: 60px;
                color: #f200d6;
                font-weight: 900;
                text-align: center;
                flex-shrink: 0;
            }

            .icon1 {
                background: url('../assets/zhImage/icon4.png') no-repeat;
                background-size: 100% 100%;
            }

            .icon2 {
                background: url('../assets/zhImage/icon2.png') no-repeat;
                background-size: 100% 100%;
            }
        }

        .led-left-center {
            background: url('../assets/zhImage/left-top.png') no-repeat;
            background-size: 100% 100%;
            width: 3200px;
            height: 660px;
            padding: 140px 50px 50px 50px;
            box-sizing: border-box;
            display: flex;
            margin-top: 30px;
            gap: 30px;
        }

        .led-left-bottom {
            width: 3200px;
            background: url('../assets/zhImage/left-bottom.png') no-repeat;
            background-size: 100% 100%;
            height: 808px;
            padding: 70px 50px 50px 50px;
            box-sizing: border-box;
            display: flex;
            margin-top: 20px;


            .led-left-right-left {
                width: 1988px;
            }

            .left-bottom-left-tow {
                width: 100%;
                display: flex;

                .led-left-right-left-row1 {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 570px;
                    height: 330px;

                    .block {
                        display: block;
                        width: 578px;
                        height: 347px;
                    }
                }

                .icon-bg {
                    width: 570px;
                    background: url('../assets/zhImage/icon1.png') no-repeat;
                    background-size: 100% 100%;
                    height: 355px;
                    line-height: 350px;
                    font-size: 60px;
                    color: #f200d6;
                    font-weight: 900;
                    text-align: center;
                }
            }

            .rollTable {
                flex: 1;
                margin-left: 30px;
            }
        }
    }

    .led-center {
        width: 2880px;
        display: flex;
        align-items: center;
        flex-direction: column;
        height: 1860px;

        .led-center-top {
            margin-top: 200px;
        }

        .hot-title {
            display: block;
            width: 946px;
            height: 87px;
        }

        .hot {
            display: block;
            width: 1318px;
            height: 1324px;
            margin: 0 30px;
        }

        .hot-center {
            display: flex;
            margin-top: 200px;

            .icon-bg {
                display: block;
                width: 570px;
                height: 1100px;
                background: url('../assets/zhImage/icon.png') no-repeat;
                background-size: 100% 100%;
                flex-shrink: 0;
                line-height: 350px;
                font-size: 60px;
                color: #f200d6;
                font-weight: 900;
                text-align: center;
            }
        }
    }

    .right-top {
        width: 2500px;
        background: url('../assets/zhImage/right-top.png') no-repeat;
        background-size: 100% 100%;
        height: 1050px;
        padding: 100px 50px 50px 50px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;

        .right-bottom-left {
            display: flex;
            gap: 30px;

            .top-row {
                width: 1000px;

                .icon-list {
                    background: url('../assets/zhImage/icon-list.png')no-repeat;
                    height: 400px;
                    background-size: 100% 100%;
                    line-height: 350px;
                    font-size: 60px;
                    color: #f200d6;
                    font-weight: 900;
                    text-align: center;
                    display: flex;
                    justify-content: center;

                    div {
                        flex: 1;
                    }
                }

                img {
                    display: block;
                    width: 100%;
                    height: 350px;
                }
            }

            .right {
                width: 1400px;
            }
        }
    }

    .right-bottom {
        width: 2500px;
        background: url('../assets/zhImage/right-top.png') no-repeat;
        background-size: 100% 100%;
        height: 1050px;
        margin-top: 30px;



        .right-bottom-right {
            padding: 100px 50px 50px 50px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;

            .row {
                width: 1185px;
                height: 450px;
            }

            .flex {
                display: flex;

                .image {
                    background: url('../assets/zhImage/icon3.png');
                    background-size: 100% 100%;
                    display: block;
                    width: 580px;
                    height: 450px;
                    line-height: 350px;
                    font-size: 60px;
                    color: #f200d6;
                    font-weight: 900;
                    text-align: center;
                }

                div {
                    width: 600px;
                }
            }
        }
    }
}
</style>